<template>
    <el-menu :default-active="defaultActivate" :collapse="isCollapse" class="el-menu-vertical-demo" router>
        <MenuHeader></MenuHeader>
        <!-- 登录按钮，用户未登录时显示 -->
        <div v-if="!authStore.isLoggedIn" class="login-button"><el-button type="primary" round
                @click="dialogVisible = true">登录</el-button>
        </div>
        <div v-else style="height: 90%;">
            <el-scrollbar>
                <!-- 组件模板：替换三层循环为递归组件渲染 -->
                <!-- Template 部分 -->
                <MenuNode v-for="(parentCategory, index) in modelList" :key="parentCategory.categoryUrl"
                    :item="parentCategory" :is-collapse="isCollapse" />
                <!-- 所有会话 -->
                <el-menu-item index="/allsessions">
                    <el-icon>
                        <ChatLineSquare />
                    </el-icon>
                    <template #title>
                        <p class="menu-title">所有对话</p>
                    </template>
                </el-menu-item>
                <!-- 设置 -->
                <el-menu-item index="/setting">
                    <el-icon>
                        <Setting />
                    </el-icon>
                    <template #title>
                        <p class="menu-title">设置</p>
                    </template>
                </el-menu-item>
            </el-scrollbar>
        </div>
    </el-menu>

    <!-- 登录弹窗 -->
    <el-dialog v-model="dialogVisible" width="600" align-center @close="dialogClose">
        <template #header>
            <div class="dialog-header">
                <h2>登录后使用基于DAO&LLM的C环设计仿真平台</h2>
                <img src="/favicon.ico" alt="Logo" class="logo-image">
            </div>
        </template>
        <el-divider />
        <LoginComponent ref="loginComponentRef" @login-success="handleLoginSuccess" @login-failed="handleLoginFailed" />
    </el-dialog>

</template>

<script setup>
import { computed, ref, onMounted } from "vue"
import { Setting, ChatLineSquare, Folder, Files } from "@element-plus/icons-vue"

import { useAuthStore } from "@/stores/auth";
import LoginComponent from "../common/login/index.vue";

import { getMenus } from "@/api/category";
import MenuNode from './MenuNode.vue'

const props = defineProps(['cIsCollapse'])
const authStore = useAuthStore()
//左侧消息列表5个
const dialogVisible = ref(false)
const loginComponentRef = ref(null)
const modelList = ref([])
const defaultActivate = ref('')
// /chat/针灸大模型-1

// 处理登录成功
const handleLoginSuccess = () => {
    // 登录成功后，刷新页面
    dialogVisible.value = false
    location.reload()
}

// 处理登录失败
const handleLoginFailed = () => {
    // 可以添加登录失败的处理逻辑
    console.log('登录失败')
}

// 对话框关闭时重置表单
const dialogClose = () => {
    if (loginComponentRef.value) {
        // 关闭登录弹窗后，重置登录表单
        loginComponentRef.value.resetForm()
    }
}

//计算属性，当父组件传来的值变化时，重新计算
const isCollapse = computed(() => {
    return props.cIsCollapse
})
onMounted(() => {
    // console.log(authStore.isLoggedIn);
    if (authStore.isLoggedIn) {
        // getLimitSessionsList(authStore.user)
        handleGetModelList()
    }
})


//获取左侧模型列表
const handleGetModelList = () => {
    //三级结构时使用的菜单获取函数
    getMenus().then(res => {
        modelList.value = res.data
    })
}



</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 20%;
}


:deep(.el-menu-item.is-active) {
    background-color: rgb(235.9, 245.3, 255);
}

:deep(.el-menu-item) {
    .robot-image {
        display: block !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .el-image {
        display: block !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

.el-icon svg {
    height: 2.2rem;
    width: 2.2rem;
}


.session-menu-item {
    height: 5.185rem;
}

.menu-title {
    font-size: 1rem;
    margin-left: 0.5rem;
}

.login-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5.18rem;

    .el-button {
        height: 50%;
        width: 80%
    }
}

/* 登录对话框样式 */
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    h2 {
        margin: 0;
        font-weight: 500;
        color: #303133;
    }

    .logo-image {
        width: 40px;
        height: 40px;
    }
}
</style>
